<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <title>注册</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- Bootstrap -->
    <link href="static/css/pc/minCss/bootstrap.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="static/css/pc/minCss/all.min.css" />

    <!--[if lt IE 9]>
    <script src="static/js/pc/dest/html5shiv.min.js"></script>
    <script src="static/js/pc/dest/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<div id="lr">
    <div class="container">
        <img data-login="logo" src="static/images/pc/logo_bg.png" alt="" />
        <div id="regist">
            <div id="registBox" data-regist="container">
                <!--  注册信息界面  -->
                <div  data-regist="registnow">
                    <form data-regist="form" action="">
                        <!--  注册类型标签选项  -->
                        <div role="tabpanel">
                            <!-- Nav tabs -->
                            <ul class="nav nav-tabs" role="tablist" data-regist="tabpanel">
                                <li role="presentation" class="active"><a href="#one" aria-controls="one" role="tab" data-toggle="tab">个人注册</a></li>
                                <li role="presentation" ><a href="#studio" aria-controls="studio" role="tab" data-toggle="tab">工作室注册</a></li>
                                <li role="presentation" ><a href="#business" aria-controls="business" role="tab" data-toggle="tab">企业注册</a></li>
                            </ul>
                            <!-- Tab panes -->
                            <div class="tab-content">
                                <div  class="form-group has-success has-feedback tab-pane active" role="tabpanel" id="one">
                                    <label for="regist_oneuser" class="sr-only">请输入您的用户昵称</label>
                                    <span class="input-group-addon" data-regist="logusericon"></span>
                                    <input class="form-control" id="regist_oneuser" name="regist_oneuser" placeholder="请输入您的用户昵称" />
                                    <span data-regist="helpword" class="help-block">*由字母加数字符号至少两种以上字符组成</span>
                                </div>

                                <div class="tab-pane form-group has-success has-feedback" id="studio" role="tabpanel">
                                    <label for="regist_studiouser" class="sr-only">请输入工作室名称</label>
                                    <span class="input-group-addon" data-regist="logusericon"></span>
                                    <input class="form-control" id="regist_studiouser" name="regist_studiouser" placeholder="请输入工作室名称" />
                                    <span data-regist="helpword" class="help-block">*由字母加数字符号至少两种以上字符组成</span>
                                </div>

                                <div class="tab-pane form-group has-success has-feedback" id="business" role="tabpanel">
                                    <label for="regist_businessuser" class="sr-only">请输入企业名称</label>
                                    <span class="input-group-addon" data-regist="logusericon"></span>
                                    <input class="form-control" id="regist_businessuser" name="regist_businessuser" placeholder="请输入企业名称" />
                                    <span data-regist="helpword" class="help-block">*由字母加数字符号至少两种以上字符组成</span>
                                </div>
                            </div>
                        </div>
                        <!--- 其他注册信息 --->
                        <div class="form-group has-success has-feedback">
                            <label for="regist_pwd" class="sr-only">请设置密码</label>
                            <span class="input-group-addon" data-regist="logpwdicon"></span>
                            <input class="form-control" id="regist_pwd" name="regist_pwd" placeholder="请设置密码" />
                            <span data-regist="helpword" class="help-block">*由字母加数字符号至少两种以上字符组成</span>
                        </div>
                        <div class="form-group has-success has-feedback">
                            <label for="regist_phone" class="sr-only">请输入手机号码</label>
                            <span class="input-group-addon" data-regist="regphoneicon"></span>
                            <input class="form-control" id="regist_phone" name="regist_phone" placeholder="请输入手机号码" />
                            <span data-regist="helpword" class="help-block">*由字母加数字符号至少两种以上字符组成</span>
                        </div>
                        <div class="form-group has-success has-feedback">
                            <label for="regist_phoneKey" class="sr-only">请输入手机验证码</label>
                            <span class="input-group-addon" data-regist="regkeyicon"></span>
                            <button type="button" disabled="disabled" id="recruit_getcode">点击获取验证码</button>
                            <input class="form-control" id="regist_phoneKey" name="regist_key" placeholder="请输入手机验证码" />
                            <span data-regist="helpword" class="help-block">*由字母加数字符号至少两种以上字符组成</span>
                        </div>


                        <!-- v1.1 选填信息 start-->
                        <div id="reg-msg-down">
                            <h2 id="reg-msg-key">动画制作工作室信息（选填）<b></b></h2>
                            <div class="reg-hide" id="reg-msg-up">
                                <div class="form-group has-success has-feedback">
                                    <input class="form-control" name="regist_comaddress" placeholder="工作室地址"/>
                                    <span data-regist="helpword" class="help-block hide">*由字母加数字符号至少两种以上字符组成</span>
                                </div>
                                <div class="form-group has-success has-feedback">
                                    <input class="form-control" name="regist_contact" placeholder="联系人"/>
                                    <span data-regist="helpword" class="help-block hide">*由字母加数字符号至少两种以上字符组成</span>
                                </div>
                                <div class="form-group has-success has-feedback">
                                    <input class="form-control" name="regist_contel" placeholder="联系电话"/>
                                    <span data-regist="helpword" class="help-block hide">*由字母加数字符号至少两种以上字符组成</span>
                                </div>
                                <div class="form-group has-success has-feedback">
                                    <input class="form-control" name="regist_pernum" placeholder="工作室人数"/>
                                    <span data-regist="helpword" class="help-block hide">*由字母加数字符号至少两种以上字符组成</span>
                                </div>
                                <div class="form-group has-success has-feedback">
                                    <input class="form-control" name="regist_contact" placeholder="工作室邮箱"/>
                                    <span data-regist="helpword" class="help-block hide">*由字母加数字符号至少两种以上字符组成</span>
                                </div>
                                <div class="form-group has-success has-feedback">
                                    <input class="form-control" name="regist_contel" placeholder="电脑数量"/>
                                    <span data-regist="helpword" class="help-block hide">*由字母加数字符号至少两种以上字符组成</span>
                                </div>
                                <div class="form-group has-success has-feedback">
                                    <input class="form-control" name="regist_contel" placeholder="渲染农场"/>
                                    <span data-regist="helpword" class="help-block hide">*由字母加数字符号至少两种以上字符组成</span>
                                </div>
                                <div class="form-group has-success has-feedback" data-regist="radio">
                                    <p>流程管理软件</p>
                                    <ul>
                                        <li><input type="radio" name="" value="Anigo"/>Anigo</li>
                                        <li><input type="radio" name="" value="Alienbrain"/>Alienbrain</li>
                                        <li><input type="radio" name="" value="Shotgun"/>Shotgun</li>
                                        <li><input type="radio" name="" value="Tactic"/>Tactic</li>
                                        <li><input type="radio" name="" value="Others"/>Others</li>
                                    </ul>
                                </div>

                            </div>
                        </div>

                        <!-- v1.1 选填信息 end-->

                        <!-- 同意协议 -->
                        <div data-regist="agreement">
                            <label><input type="checkbox" name="agreement" />我已经阅读并同意<a href="#">《众创部落协议》</a></label>
                        </div>
                        <button type="button" id="regist_submit" data-regist="regist_submit" class="btn-block ">立即注册</button>
                        <div data-regist="haveAccount"><a id="tologin">已有账号</a></div>
                    </form>
                </div>
                <!--  注册完成界面  -->
                <div data-regist="regfinish" >
                    <h1>注册成功</h1>
                    <p data-regist="countdown"><span id="regist_countdown">3</span>秒后自动返回首页</p>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="static/js/pc/dest/jquery-1.11.3.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="static/js/pc/dest/bootstrap.min.js"></script>
<script src="static/js/pc/dest/all.min.js"></script>
<script>
    var opts= [{'width':0},{'width':'440px'}];
    var time=200;
    $('#torecruit').click(function(){
        $('[data-login="container"]').animate(opts[0],time,function(){
            $('[data-login="container"]').hide();
            $('[data-regist="container"]').show().animate(opts[1],time);
        });
    });
    $('#tologin').click(function(){
        $('[data-regist="container"]').animate(opts[0],time,function(){
            $('[data-regist="container"]').hide();
            $('[data-login="container"]').show().animate(opts[1],time);
        });
    });
</script>

</body>


</html>